<template>
  <div class="juse1">
    <div class="jindu  animate__animated animate__fadeInDown">

      <ul class="steps">
        <li v-for="(item, index) in list" :key="item.id" :class="{}" @click="maodian(index + 1)">
          <div class="step-line"></div>
          <div class="step-content" :class="item.active ? 'stepActive' : ''">
            <div class="step-num">
              <div class="" :class="{ 'xian': list.length != index + 1, 'xian2': index <= 1 }"></div>
            </div>
            <div class="sub_title">{{ item.name }}</div>
          </div>
        </li>
      </ul>

    </div>

    <div class="jueseContent" ref="jueseContent"  @scroll="handleScroll">
      <div class="zhuli" ref="title1" id="section1">
        <div class="title  animate__animated animate__fadeInUp">
          智能助理
        </div>
        <div class="all">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(list, ii) in swiperListAll" :key="ii">

                <div v-for="(item, index) in list" :key="index" class="swiper-slide2"
                  :class="item.typeAll + '  animate__animated animate__fadeInUp animate__delay-0' + index * 1 + 's'">
                  <div class="mingzi">
                    <div class="type" :class="item.typecolor">{{ item.typeText }}</div>
                    <div class="zi">{{ item.title }}</div>
                  </div>
                  <div class="numall">
                    <div class="numItem">
                      <div class="numName">{{ item.ke }}</div>
                      <div class="num">{{ item.keText }}</div>
                    </div>
                    <div class="numItem">
                      <div class="numName">{{ item.tianqi }}</div>
                      <div class="num">{{ item.tianqiText }}</div>
                    </div>

                  </div>
                  <div class="fenxi">
                    <div class="up">
                      <div class="ming">智能分析</div>
                      <div class="leixing">{{ item.zhinengType }}</div>
                    </div>
                    <div class="tab">
                      <div class="tabItem" :style="{ color: tab.color, borderColor: tab.bg }"
                        v-for="(tab, i) in item.zhinengList" :key="i">
                        {{ tab.name }}
                      </div>
                    </div>
                    <div class="content">
                      {{ item.content }}
                    </div>
                  </div>
                </div>


              </div>

            </div>

            <div class="swiper-pagination"></div>
          </div>
        </div>



      </div>
      <div class="renwu" id="section2">
        <div class="title" ref="title2">
          任务进行中
        </div>
        <div class="jinxing">

          <div class="dao">

            <div class="daoItem" v-for="(item, i) in jinxingList" :key="i" :class="jinxingIndex == i ? 'active' : ''"
              @click="jinxingClick(item, i)">
              <div class="mingzi">{{ item.title }}</div>
              <div class="tab">
                <div class="tabItem" :style="{ color: tab.color, borderColor: tab.bg }"
                  v-for="(tab, index) in item.zhinengList" :key="index">
                  {{ tab.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="daoContent">
            <div class="contentItem" v-for="(item, i) in jx_List" :key="i">
              <div class="title">
                {{ item.title }}
              </div>
              <div class="jx_zhanshi">
                <div class="zhanItem" v-for="(con, index) in item.conList" :key="index">
                  <div class="dot"></div>
                  <div class="line" :class="{'w50':con.line}"></div>
                  <div class="type" :class="con.type == 1 ? 'wc' : 'jxz'">{{ con.typeText }}</div>
                  <div class="neirong">
                    <div class="ming">{{ con.title }}</div>
                    <div class="time">{{ con.time }}</div>
                    <img src="" alt="" v-if="con.img">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>



      <div class="jiashichang  wow fadeInUp" data-wow-duration="2s" id="section3">
        <div class="title">
          数据驾驶舱
        </div>

        <div class="jsc">
          <div class="jscItem">
            <!-- <img src="@/assets/images/zhexian2.png" alt=""> -->
            <lineBlock :id="'ec1'" :linedata="linedata1"></lineBlock>
          </div>
          <div class="jscItem">
            <!-- <img src="@/assets/images/zhexian1.png" alt=""> -->
            <lineBlock :id="'ec2'" :linedata="linedata2"></lineBlock>
          </div>
        </div>
      </div>
      <div class="daiban" id="section4">
        <div class="title">
          待办事项
        </div>
        <div class="dbj">

          <div class="dbjItem" v-for="(item, i) in dbjList" :key="i">
            <div class="title">
              <div class="icon">
                <img src="@/assets/images/daiban.png" alt="">

              </div>
              {{ item.title }}
            </div>
            <div class="content">
              <div class="type">{{ item.typeText }}</div>
              <div class="con">{{ item.content }}</div>
            </div>
            <div class="anniu">
              <div>去处置</div>
            </div>
          </div>
        </div>
      </div>
      <div class="changyong" ref="title4" id="section5">
        <div class="title">
          常用功能
        </div>
        <div class="daohang">
          <div class="dhItem" @click="dao2(i)" :class="daoI2 == i ? 'active' : ''" v-for="(item, i) in hyList2" :key="i">

            {{ item.name }}

          </div>
        </div>
        <div class="cyAll">
          <div class="cyItem" v-for="(item, i) in cyList" :key="i">
            <img :src="require(`@/assets/images/${item.img}.png`)" alt="">
            <div class="name">{{ item.name }}</div>



          </div>
        </div>
      </div>


      <div class="hangye" ref="title5" id="section6">
        <div class="title">
          行业资讯
        </div>

        <div class="daohang">
          <div class="dhItem" @click="dao(i)" :class="daoI == i ? 'active' : ''" v-for="(item, i) in hyList" :key="i">

            {{ item.name }}

          </div>
        </div>
        <div class="xinwen">
          <div class="xwItem" v-for="(item, i) in 4" :key="i">
            <img :src="getImg('xw' + item + '.png')" alt="">
            <!-- <div class="n-item">
              <h3 class="f-18">不同文化国家在廊坊同台演绎 共赴一带一路艺术发展之约</h3>
              <div class="sub-tt f-14">2023“一带一路”·长城国际民间文化艺术节在丝绸之路国际艺术交流中心盛大启幕</div>
              <div class="imgshow">
                <div class="img-box">
                  <img src="http://tool.han-cloud.com/create_thumb.php?w=294&h=164" alt="">
                </div>
              </div>
              <div class="n-b f-14">
                <a href="##">
                  <span>点击查看</span>
                  <i class="iconfont icon-gengduo"></i>
                </a>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lineBlock from "./lineBlock";
export default {
  components:{lineBlock},
  data() {
    return {
      linedata1:{},
      linedata2:{},
      jx_List: [],
      swiperListAll: [
        [
          {
            title: '天气预报明日暴雨预警',
            type: '1',
            typecolor: 'type1',
            typeAll: 'typeAll1',
            typeText: '预警',
            ke: '客流预测',
            keText: '5682人（梦廊坊）',
            tianqi: '暴雨级别',
            tianqiText: '蓝色预警',
            zhinengType: '未开始',
            zhinengList: [
              {
                name: '二级',
                color: '#0661FB',
                bg: '#0661FB',
              },
              {
                name: '恶劣天气',
                color: '#FF8F00',
                bg: '#FF8F00',
              },
              {
                name: '应急事件',
                color: '#DF1B00',
                bg: '#DF1B00',
              },
            ],
            content: '天气预报明日14点局部暴雨，12小时内降雨量将达50毫米以上，判定为暴雨蓝色预警。客流预测明日游客5000人以上. 建议启动三级预警，请立刻处置。'
          },
          {
            title: 'AI摄像头报警《就不喜欢红楼梦》游客聚集',
            type: '1',
            typecolor: 'type2',
            typeAll: 'typeAll2',
            typeText: '执行',
            ke: '客流预测',
            keText: '3981（幻城）',
            tianqi: '天气预报',
            tianqiText: '31°',
            zhinengType: '未开始',
            zhinengList: [
              {
                name: '二级',
                color: '#0661FB',
                bg: '#0661FB',
              },
              {
                name: '游客体验',
                color: '#FF8F00',
                bg: '#FF8F00',
              },
              {
                name: '运营事件',
                color: '#0EAF9C',
                bg: '#2BA471',
              },
              {
                name: '高温',
                color: '#DF1B00',
                bg: '#DF1B00',
              },
            ],
            content: '1.智能助手：打开《就不喜欢红楼梦》排队区雾森。 3.剧场运营经理：协调游客提前10分钟入场。 2.商业部经理：协调一辆冷饮花车，进入排队区。'
          },
          {
            title: '《筒子楼》 游客纠纷',
            typecolor: 'type3',
            type: '1',
            typeText: '监测',
            typeAll: 'typeAll3',
            ke: '客流预测',
            keText: '6687（梦廊坊）',
            tianqi: '天气预报',
            tianqiText: '31°',
            zhinengType: '进行中',
            zhinengList: [
              {
                name: '二级',
                color: '#0661FB',
                bg: '#0661FB',
              },
              {
                name: '游客纠纷',
                color: '#DF1B00',
                bg: '#DF1B00',
              },
              {
                name: '运营事件',
                color: '#0EAF9C',
                bg: '#2BA471',
              },

            ],
            content: '1.就近的4名景区运营人员赶赴现场进行疏导 ,劝阻其他游客用手机拍照传播事件。事件已经同步通知剧场运营群召集人 苏伯楠。 2.丝路派出所值班民警 王强 到现场防止事态扩大......'
          },
          {
            title: '亲子家庭团接待准备',
            typecolor: 'type4',
            typeAll: 'typeAll4',
            type: '1',
            typeText: '完成',
            ke: '客流预测',
            keText: '3981（幻城）',
            tianqi: '天气预报',
            tianqiText: '31°',
            zhinengType: '完成',
            zhinengList: [
              {
                name: '三级',
                color: '#0661FB',
                bg: '#0661FB',
              },
              {
                name: '活动接待',
                color: '#FF8F00',
                bg: '#FF8F00',
              },
              {
                name: '运营事件',
                color: '#0EAF9C',
                bg: '#2BA471',
              },
            ],
            content: '亲子家庭团共计269人，9月28日上午10点30到达，已经提前2天完成了准备工作。'
          },

        ],
        [
          {
            title: '天气预报明日暴雨预警',
            type: '1',
            typecolor: 'type1',
            typeAll: 'typeAll1',
            typeText: '预警',
            ke: '客流预测',
            keText: '5682人（梦廊坊）',
            tianqi: '暴雨级别',
            tianqiText: '蓝色预警',
            zhinengType: '未开始',
            zhinengList: [
              {
                name: '二级',
                color: '#0661FB',
                bg: '#0661FB',
              },
              {
                name: '恶劣天气',
                color: '#FF8F00',
                bg: '#FF8F00',
              },
              {
                name: '应急事件',
                color: '#DF1B00',
                bg: '#DF1B00',
              },
            ],
            content: '天气预报明日14点局部暴雨，12小时内降雨量将达50毫米以上，判定为暴雨蓝色预警。客流预测明日游客5000人以上. 建议启动三级预警，请立刻处置。'
          },
          {
            title: 'AI摄像头报警《就不喜欢红楼梦》游客聚集',
            type: '1',
            typecolor: 'type2',
            typeAll: 'typeAll2',
            typeText: '执行',
            ke: '客流预测',
            keText: '3981（幻城）',
            tianqi: '天气预报',
            tianqiText: '31°',
            zhinengType: '未开始',
            zhinengList: [
              {
                name: '二级',
                color: '#0661FB',
                bg: '#0661FB',
              },
              {
                name: '游客体验',
                color: '#FF8F00',
                bg: '#FF8F00',
              },
              {
                name: '运营事件',
                color: '#0EAF9C',
                bg: '#2BA471',
              },
              {
                name: '高温',
                color: '#DF1B00',
                bg: '#DF1B00',
              },
            ],
            content: '1.智能助手：打开《就不喜欢红楼梦》排队区雾森。 3.剧场运营经理：协调游客提前10分钟入场。 2.商业部经理：协调一辆冷饮花车，进入排队区。'
          },
          {
            title: '《筒子楼》 游客纠纷',
            typecolor: 'type3',
            type: '1',
            typeText: '监测',
            typeAll: 'typeAll3',
            ke: '客流预测',
            keText: '6687（梦廊坊）',
            tianqi: '天气预报',
            tianqiText: '31°',
            zhinengType: '进行中',
            zhinengList: [
              {
                name: '二级',
                color: '#0661FB',
                bg: '#0661FB',
              },
              {
                name: '游客纠纷',
                color: '#DF1B00',
                bg: '#DF1B00',
              },
              {
                name: '运营事件',
                color: '#0EAF9C',
                bg: '#2BA471',
              },

            ],
            content: '1.就近的4名景区运营人员赶赴现场进行疏导 ,劝阻其他游客用手机拍照传播事件。事件已经同步通知剧场运营群召集人 苏伯楠。 2.丝路派出所值班民警 王强 到现场防止事态扩大......'
          },
          {
            title: '亲子家庭团接待准备',
            typecolor: 'type4',
            typeAll: 'typeAll4',
            type: '1',
            typeText: '完成',
            ke: '客流预测',
            keText: '3981（幻城）',
            tianqi: '天气预报',
            tianqiText: '31°',
            zhinengType: '完成',
            zhinengList: [
              {
                name: '三级',
                color: '#0661FB',
                bg: '#0661FB',
              },
              {
                name: '活动接待',
                color: '#FF8F00',
                bg: '#FF8F00',
              },
              {
                name: '运营事件',
                color: '#0EAF9C',
                bg: '#2BA471',
              },
            ],
            content: '亲子家庭团共计269人，9月28日上午10点30到达，已经提前2天完成了准备工作。'
          },

        ],
      ],

      jinxingList: [
        {
          title: 'AI摄像头报警《就不喜欢红楼梦》游客聚集',
          type: '1',

          zhinengList: [
            {
              name: '二级',
              color: '#0661FB',
              bg: '#0661FB',
            },
            {
              name: '游客体验',
              color: '#FF8F00',
              bg: '#FF8F00',
            },
            {
              name: '运营事件',
              color: '#0EAF9C',
              bg: '#2BA471',
            },
            {
              name: '高温',
              color: '#DF1B00',
              bg: '#DF1B00',
            },
          ],
          list: [
            {
              title: '智能助理',
              conList: [
                {
                  type: '1',
                  typeText: '完成',
                  line:'w50',
                  title: '已通过物联中台自动开启雾森',
                  time: '2023-08-01 13:30',
                  img: '',
                },

              ]
            },
            {
              title: '商务部经理王晓冬',
              conList: [
                {
                  type: '1',
                  typeText: '完成',
                  title: '任务已下发王晓冬',
                  time: '2023-08-01 13:30',
                  img: '',
                },
                {
                  type: '2',
                  typeText: '进行中',
                  title: '收到任务并回复：“正在安排简易花车”',
                  time: '2023-08-01 13:30',
                  img: '',
                },

              ]
            },
            {
              title: '剧场运营部经理李舜治',
              conList: [
                {
                  type: '1',
                  typeText: '完成',
                  title: '任务已下发李舜治',
                  time: '2023-08-01 13:30',
                  img: '',
                },
                {
                  type: '1',
                  typeText: '完成',
                  title: '收到任务并回复：“已协调演艺部 可提前入场”',
                  time: '2023-09-01 13:35',
                  img: '',
                },
                {
                  type: '2',
                  typeText: '进行中',
                  title: '值班人员密切关注现场情况',
                  time: '2023-09-01 13:36',
                  img: '',
                },

              ]
            },
          ],
        },
        {
          title: '《筒子楼》 游客纠纷',
          type: '1',

          zhinengList: [
            {
              name: '三级',
              color: '#0661FB',
              bg: '#0661FB',
            },
            {
              name: '游客纠纷',
              color: '#DF1B00',
              bg: '#DF1B00',
            },
            {
              name: '运营事件',
              color: '#0EAF9C',
              bg: '#2BA471',
            },
          ],
          list: [
            {
              title: '吴梦晓',
              conList: [
                {
                  type: '1',
                  typeText: '完成',
                  title: '任务下发吴梦晓',
                  time: '2023-08-01 13:30',
                  img: '',
                },
                {
                  type: '1',
                  typeText: '完成',
                  title: '收到任务并回复：“已完成接待准备”',
                  time: '2023-08-01 13:30',
                  img: '',
                },

              ]
            },
            {
              title: '苏伯楠',
              conList: [
                {
                  type: '1',
                  typeText: '完成',
                  title: '任务下发苏伯楠企业微信',
                  time: '2023-09-01 13:30',
                  img: '',
                },
                {
                  type: '2',
                  typeText: '进行中',
                  title: '收到任务并回复：“2分钟内到现场”',
                  time: '2015-09-01 09:35',
                  img: '',
                },

              ]
            },
            {
              title: '王强',
              conList: [
                {
                  type: '1',
                  typeText: '完成',
                  title: '任务下发民警王强',
                  time: '2023-08-01 13:30',
                  img: '',
                },

                {
                  type: '2',
                  typeText: '进行中',
                  title: '收到任务并回复：“已出发前往客服”',
                  time: '2023-09-01 13:36',
                  img: '',
                },

              ]
            },
          ],

        },


      ],
      list: [
        {
          id: '1',
          name: "智能助理",
          active:true,

        },
        {
          id: '2',
          name: "数据驾驶舱",
          active:false,

        },
        {
          id: '3',
          name: "重要待办",
          active:false,
        },
        {
          id: '4',
          name: "常用功能",
          active:false,
        },
        {
          id: '5',
          name: "行业资讯",
          active:false,
        },
      ],
      jinxingIndex: 0,
      interval: null,
      cyList: [
        {
          name: '智能寻人',
          img: 'cy2_1',
        },
        {
          name: '实时热力',
          img: 'cy2_2',
        },
        {
          name: '运营事件',
          img: 'cy2_3',
        },
        {
          name: '应急事件',
          img: 'cy2_4',
        },
        {
          name: '任务下发',
          img: 'cy2_5',
        },
        {
          name: '活动排期',
          img: 'cy2_6',
        },
        {
          name: '更多',
          img: 'cy2_7',
        },
      ],
      hyList: [
        {
          id: '1',
          name: '园区动态',
        },
        {
          id: '1',
          name: '园区资讯',
        },
        {
          id: '1',
          name: '商业资讯',
        },
        {
          id: '1',
          name: '成长攻略',
        },
      ],
      hyList2: [
        {
          id: '1',
          name: '商品管理',
        },
        {
          id: '1',
          name: '营销活动',
        },
        {
          id: '1',
          name: '解决方案',
        },
        {
          id: '1',
          name: '商品交易',
        },
        {
          id: '1',
          name: '客群维护',
        },
        {
          id: '1',
          name: '平台获客',
        },
      ],
      dbjList: [
        {
          title: '天气预报明日暴雨',
          type: '3',
          typeText: '未开始',
          content: '天气预报明日14点局部暴雨，客流预测明日游客5000人以上，建议启动蓝色预警',
        },
      ],

      daoI: '0',
      daoI2: '0',
    }
  },
  mounted() {
   
    var swiper = new Swiper('.swiper-container', {
      // pagination: {
      //   el: '.swiper-pagination',
      //   clickable: true,
      // },
      // autoplay: true,
      spaceBetween: 30,
      observer: true,
      observeSlideChildren: true,
    });
    this.$nextTick(() => {
      this.jx_List = this.jinxingList[0].list
      // this.$wow.init();
      // this.$refs.jueseContent.scrollTop = 1000;
      
    })
    // window.addEventListener('scroll', this.scrollToTop)
    this.linedata1 = {
      topList:[
        {
          name:'入园人数',
          num:'3,289',
          rate:'-0.2'
        },{
          name:'在园人数',
          num:'1,160',
          rate:'-0.2'
        },{
          name:'二次入园人次',
          num:'742',
          rate:'2.7'
        },{
          name:'进店客流',
          num:'4,280',
          rate:'22.7'
        },{
          name:'预测客流',
          num:'8,290',
          rate:'-0.2'
        }
      ],
        title:'「客流」 关注数据',
        sub:'时段客流趋势',
        Xdata:['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00','17:00','18:00'],
        Sdata:[
          [820, 932, 901, 934, 1290, 1330, 1320, 1290, 1330],
          [1820, 32, 90, 34, 129, 1330, 1320, 190, 130]
        ],
        Ldata:['预测客流','入园客流'],
        text:'基于客流数据分析，今日预计入园人数 8290人，含要客预约110人，夜场人数约 390人，团客人数约460人,本月累计入园达 2.8万人，比上月同期增长 42%，进店客流比昨日+52%;请做好运营工作安排!'
    }
    this.linedata2 = {
      topList:[
        {
          name:'车位使用率',
          num:'2,949',
          rate:'-0.2'
        },{
          name:'空余车位数',
          num:'23,390',
          rate:'-0.2'
        },{
          name:'入场车辆数',
          num:'4,234',
          rate:'2.7'
        },{
          name:'外地车占比',
          num:'24.23',
          rate:'22.7'
        },{
          name:'平均停留时长',
          num:'12.01',
          rate:'-0.2'
        }
      ],
        title:'「车流」关注数据',
        sub:'时段车流动态',
        Xdata:['08:00', '09:00', '10:00', '11:00', '12:00', '13:00'],
        Sdata:[
          [820, 932, 901, 934, 1290, 1330],
          [1820, 32, 90, 34, 129, 1330]
        ],
        Ldata:['入场车辆','离场车辆'],
        text:'基于车流数据分析，今日车位需求量约952个，已入场车辆数 589辆，临时车占86%，VIP车占5%;北京车牌占比10%，廊坊车牌占比65%，天津车牌占比5%，本月车场平均使用率为49%，请做好运营工作安排!'
    }
  },
  methods: {
    handleScroll (e) {
        let scrolled =this.$refs.jueseContent.scrollTop;
              console.log(scrolled)
              var tar = document.getElementById('section2')
              var soltop = tar.offsetTop
    
      if(scrolled == soltop-200){
        alert('3333');
      }
        //滚动条触发事件
      // console.log(e)
      if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight ) {
          console.log("嘿嘿我在底部触发了")
      }

    },
    maodian(num) {
      this.list.map((item,i)=>{
        if(i <= (num-1)){
          item.active = true
        }else{
          item.active = false
        }
      })
      var tar = document.getElementById('section'+num)
      var soltop = tar.offsetTop
      $(this.$refs.jueseContent).animate({
        scrollTop: soltop - 280
      }, 666)
        this.$forceUpdate()
      },
    jinxingClick(item, i) {
      this.jx_List = item.list
      this.jinxingIndex = i
    },
    getImg(res) {
      //必须拼接一下
      return require(`@/assets/images/${res}`);//res就是图片的名字
    },
    dao(i) {
      this.daoI = i
    },
    dao2(i) {
      this.daoI2 = i
    },
  },
}
</script>
<style scoped>
@import "../../../assets/css/buzoutiao.css";
</style>
<style lang="scss" scoped>
/deep/ .swiper-container{
  margin:-24px;
  padding:24px;
}
.swiper-pagination {
  bottom: -100px;

  .swiper-pagination-bullet {
    width: 64px;
    height: 4px;
    background: #FFFFFF;
    border-radius: 14px;

  }


  .swiper-pagination-bullet-active {

    background: #A3B6ED;
  }
}


.juse1 {
  height: 100%;
}

// .jueseContent {
//   overflow-y: auto;
//   height: calc(100% - 120px);
//   // border: 1px solid red;
//   margin: 32px -24px 0;
//   padding: 0 24px;
// }

.jindu {
  display: flex;
  align-items: center;
  width: 1376px;
  height: 88px;
  background: #FFFFFF;
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
  border-radius: 12px 12px 12px 12px;
  opacity: 1;
  border: 0px solid #DDDDDD;
}

.zhuli {
  margin: 0 0 32px;

  .title {
    font-size: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 16px;
  }

  .swiper-wrapper {
    // display: flex;
    // flex-wrap: wrap;
  }

  .swiper-slide {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .swiper-slide2 {
    width: 676px !important;
    height: 385px;
    background: linear-gradient(180deg, #FFECED 0%, #FFFFFF 100%);
    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.2);
    border-radius: 12px 12px 12px 12px;
    box-sizing: border-box;
    padding: 24px;

    .mingzi {
      font-size: 20px;
      // font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      margin-bottom: 40px;
      display: flex;

      .type {
        text-align: center;
        line-height: 24px;
        width: 48px;
        height: 24px;
        background: #FFFFFF;
        border-radius: 6px 6px 6px 6px;
        font-size: 14px;
        // font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        margin-right: 16px;
      }

      .type1 {
        color: #DF1B00;
        border: 1px solid rgba(223, 27, 0, 0.2);
      }

      .type2 {
        color: #FF8F00;
        border: 1px solid rgba(255, 143, 0, 0.2);
      }

      .type3 {
        color: #0661FB;
        border: 1px solid rgba(6, 97, 251, 0.2);
      }

      .type4 {
        color: #0661FB;
        border: 1px solid rgba(6, 97, 251, 0.2);
      }



    }

    .numall {
      display: flex;

      .numItem {
        margin-right: 20px;

        .numName {
          font-size: 14px;
          // font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #737373;
          margin-bottom: 10px;
        }

        .num {
          font-size: 20px;
          // font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
        }
      }
    }

    .fenxi {
      margin-top: 30px;
      height: 181px;
      background: #FFE2E2;
      border-radius: 12px;
      box-sizing: border-box;
      padding: 20px;

      .up {
        display: flex;
        justify-content: space-between;
        align-items: center;

        font-size: 14px;
        // font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;

        .leixing {
          text-align: center;
          line-height: 28px;
          width: 66px;
          height: 28px;
          background: #FFFFFF;
          border-radius: 6px;
          opacity: 1;
          border: 1px solid rgba(223, 27, 0, 0.2);
          font-size: 14px;
          // font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #DF1B00;
        }
      }

      .tab {
        display: flex;
        margin-bottom: 15px;

        .tabItem {
          margin-right: 8px;
          padding: 4px 12px;
          background: #F4F8FF;
          border-radius: 6px;
          border: 1px solid;
          font-size: 14px;
          // font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
        }
      }

      .content {

        font-size: 14px;
        // font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #404040;
      }
    }
  }

  .typeAll1 {
    margin-bottom: 40px !important;
    background: linear-gradient(180deg, #FFECED 0%, #FFFFFF 100%);

    .fenxi {
      background: #FFE2E2;
    }
  }

  .typeAll2 {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    background: linear-gradient(180deg, #FEF5EA 0%, #FFFFFF 100%);

    .fenxi {
      background: linear-gradient(180deg, #FFF2E1 0%, #FFF0E1 100%);
    }
  }

  .typeAll3 {
    background: linear-gradient(180deg, #EBF2FD 0%, #FFFFFF 100%);

    .fenxi {
      background: #F8F9FB;
    }
  }

  .typeAll4 {
    background: linear-gradient(180deg, #EBF2FD 0%, #FFFFFF 100%);

    .fenxi {
      background: #F8F9FB;
    }
  }
}

.changyong {
  box-sizing: border-box;
  width: 100%;
  margin: 40px 0;

  .title {
    font-size: 20px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }

  .cyAll {
    box-sizing: border-box;
    height: 184px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
    box-sizing: border-box;
    // padding: 40px 70px 0;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .cyItem {
      width: 160px;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .name {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        // font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
      }

      &:hover {
        background: #F8F9FA;
      }

      border-radius: 8px;

      img {
        width: 40px;
        height: 40px;
        box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.57);
        border-radius: 9px;
      }
    }
  }
}

.daohang {
  display: flex;
  margin-bottom: 15px;

  .dhItem {
    cursor: pointer;
    margin-right: 5px;
    width: 112px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 3px;
    border: 1px solid #DCDCDC;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
  }

  .active {
    background: #0052D9;
    color: rgba(255, 255, 255, 0.9);
  }





}

.hangye {
  overflow: hidden;
  .title {

    font-size: 20px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }



  .xinwen {
    display: flex;
    justify-content: space-between;
    margin: 0 -12px;

    margin-bottom: 10px;
    .xwItem {
      cursor: pointer;
      width: 25%;
      box-sizing: border-box;
      padding: 0 12px;
      transition: all 0.4s;
      &:hover{
        transform: translateY(-10px);
      }
      h3{
        margin-bottom: 8px;
      }
      .imgshow{
        margin: 16px 0;
        .img-box{
          padding-bottom: 55.78231%;
        }
      }
      .n-b{
        border-top: 1px solid #ddd;
        padding: 16px 0;
        a{
          display: flex;
          justify-content: space-between;
        }
      }
     a{
       color: #404040;
     }
      .n-item{
        background: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
        border-radius: 8px;
        padding: 16px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }




  }
}

.renwu {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 40px;

  .title {
    font-size: 20px;
    // font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }

  .jinxing {
    height: 764px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
  }

  .dao {
    width: 410px;
    height: 100%;
    background: #EFF5FB;

    .daoItem {
      height: 174px;
      font-size: 20px;
      // font-family: PingFang SC-Semibold, PingFang SC;
      color: #000000;
      border-bottom: 1px solid #DDDDDD;
      box-sizing: border-box;
      padding: 32px;
      cursor: pointer;
    }

    .active {
      font-weight: 600;
      background: #FFFFFF;
    }

    .tab {
      display: flex;
      margin-top: 15px;

      .tabItem {
        margin-right: 8px;
        padding: 4px 12px;
        background: #F4F8FF;
        border-radius: 6px;
        border: 1px solid;
        font-size: 14px;
        // font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
      }
    }
  }

  .daoContent {
    width: calc(100% - 410px);
    box-sizing: border-box;
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .contentItem {
      box-sizing: border-box;
      padding: 24px;
      width: 448px;
      background: #F8F9FB;
      border-radius: 8px;
      margin-bottom: 24px;

      .title {
        font-size: 16px;
        // font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        margin-bottom: 20px;


      }
    }

    .jx_zhanshi {

      .zhanItem {

        padding-bottom: 20px;
        display: flex;
        justify-content: end;
        position: relative;
        padding-left: 46px;
        &:nth-last-child(1){
          .line{
            display: none;
          }
        }
        .line{
          width: 1px;
          background-color: #ddd;
          height: calc(100% - 10px);
          top: 19px;
          position: absolute;
          left: 11px;
          &.w50{
            display: block;
            height: calc(80% - 10px);
          }
        }
        .dot{
          position: absolute;
          left: 8px;
          top: 10px;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          border: 2px solid #0661FB;
          background-color: #FFF;
          
        }
        .neirong {
          width:77%;
        }

        .type {
          height: 28px;
          display: inline-block;
          font-size: 14px;
          padding: 0px 12px;
          background: rgba(91, 191, 188, 0.06);
          border-radius: 6px;
          text-align: center;
          line-height: 28px;
          margin-right: 12px;
          flex-shrink: 0;
          box-sizing: border-box;
        }

        .wc {
          color: #0EAF9C;
          border: 1px solid rgba(43, 164, 113, 0.2);
        }

        .jxz {
          color: #FF8F00;
          border: 1px solid rgba(255, 143, 0, 0.2);
        }

        .ming {
          font-size: 16px;
          // font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
        }

        .time {
          font-size: 14px;
          // font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #9A9A9A;
        }

        img {
          width: 160px;
          height: 90px;
          border-radius: 4px 4px 4px 4px;
        }
      }
    }
  }
}

.daiban {
  margin-top: 40px;

  .title {
    font-size: 20px;
    // font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }

  .dbj {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .dbjItem {
      box-sizing: border-box;
      padding: 24px;
      width: 443px;
      background: #FFFFFF;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
      border-radius: 12px 12px 12px 12px;

      .icon {
        width: 30px;
        height: 25px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .title {
        font-size: 16px;
        // font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        margin-bottom: 28px;
        display: flex;
        align-items: center;
      }

      .content {
        display: flex;

        .type {
          margin-right: 8px;
          text-align: center;
          line-height: 24px;
          width: 52px;
          height: 24px;
          background: #FFFFFF;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid rgba(223, 27, 0, 0.2);
          font-size: 12px;
          // font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #DF1B00;
        }

        .con {
          width: calc(100% - 60px);
          font-size: 14px;
          // font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
        }
      }


      .anniu {
        margin-top: 20px;
        display: flex;
        justify-content: end;

        div {
          text-align: center;
          line-height: 32px;
          width: 80px;
          height: 32px;
          background: #0661FB;
          border-radius: 4px 4px 4px 4px;
        }

        margin-top: 20px;
        font-size: 14px;
        font-family: PingFang SC-Regular,
        PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }



}

.jiashichang {

  .title {
    font-size: 20px;
    // font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }

  .jsc {
    display: flex;
    justify-content: space-between;

    .jscItem {
      width: 676px;
      height: 568px;
      background: #FFFFFF;
      box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }







  }








}</style>